<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue/vue.js"></script>
    <!--    引入vue 路由-->
    <script src="../vue/vue-router.js"></script>
</head>
<body>

<!--
   组件注册完毕后 ，可以在虚拟dom中直接使用组件标签
   问题:
      1.组件的渲染需要手动的将组件标签写在容器中，，组件的渲染是固定的
      2. 实际应用场景下  需要将组件进行动态渲染     login   -> index    register ->  index

    login    ->   /user/login   -> login组件
    register -> /user/register  -> register组件

    路由 插件
    1. 路由环境构建
       1.1 创建动态渲染组件
       1.2 定义路由列表   路径和组件的映射关系
       1.3 创建路由对象   然后传 `routes` 配置
       1.4 创建和挂载根实例  将路由对象和vue实例建立关联
       1.5 设置路由出口    将路径匹配的组件渲染到哪个位置

       spa   index.html    login.vue  register.vue
       <login></login>
       <register></register>

       /user/login   -> login.vue
       /user/register   -> register.vue

-->
<div id="app">
    <h1>vue 路由的基本使用</h1>
    <!--    声明一个路由出口-->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>

<script>

    // 定义登录组件
    let login = {
        template: `
          <div>
                <h2>登录</h2>
                <form action="#" method="get">
                    <p><input type="text" name="username" placeholder="请输入用户名"></p>
                    <p><input type="password" name="password" placeholder="请输入密码"></p>
                    <p><input type="submit" value="登录"></p>
                </form>
            </div>
        `
    }

    // 注册组件
    let register = {
        template: `
          <div>
                <h2>注册</h2>
                <form action="#" method="get">
                    <p><input type="text" name="username" placeholder="请输入用户名"></p>
                    <p><input type="password" name="password" placeholder="请输入密码"></p>
                    <p><input type="submit" value="注册"></p>
                </form>
            </div>
        `
    }

    // 2. 定义路由列表    映射关系
    const routes = [
        {path: '/login', component: login},
        {path: '/register', component: register}
    ]

    // 3. 实例化路由管理对象
    const router = new VueRouter({
        routes
    })

    let vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router   //  建立vm实例和router的关系
    })
</script>

</body>
</html>
